<template>
  <div class="box_yj" ref="parent">
    <span></span>
      <div class="border-row"></div>
      <div class="border-col"></div>
      
      <div class="section-header">人才推送TOP10</div>
      <div :style="chartsDom" v-if="!jz">
        <swiper :options="swiperOption" ref="mySwiper" v-if="listData.length" :style="chartsDom">
          <!-- slides -->
          <swiper-slide v-for="(item, index) in listData" :key="index">
            <rank-list-item :index="index" :color="`#fdbc21`" :itemIndex='"2"' :name="item.name" :value="item.value" :percentage="Math.round(100*(item.value/totalValue))" v-if="index === 0" class="rank-component"></rank-list-item>
            <rank-list-item :index="index" :color="`#fb7218`" :itemIndex='"2"' :name="item.name" :value="item.value" :percentage="Math.round(100*(item.value/totalValue))" v-if="index === 1" class="rank-component"></rank-list-item>
            <rank-list-item :index="index" :color="`#2bda6c`" :itemIndex='"2"' :name="item.name" :value="item.value" :percentage="Math.round(100*(item.value/totalValue))" v-if="index === 2" class="rank-component"></rank-list-item>
            <rank-list-item :index="index" :color="`#37a2da`" :itemIndex='"2"' :name="item.name" :value="item.value" :percentage="Math.round(100*(item.value/totalValue))" v-if="index > 2" class="rank-component"></rank-list-item>
          </swiper-slide>
        </swiper>
      </div>
      <div class="container_jz" :style="chartsDom" v-if="jz">
              <div class="circle_jz"></div>
              <div class="circle_jz"></div>
              <div class="circle_jz"></div>
            </div>
    </div>
</template>
<script>
import { getTalentRecommendationTop } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      listData: [],
      jz:false
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height-31-30  + 'px',
        'z-index': 100,
        position: 'relative',
        overflow: 'hidden',
        padding: '15px 0',
        'box-sizing': 'border-box'
        // 'background-color': 'red'
      }
      }
    },
    totalValue() {
      if(this.listData instanceof Array){
        return eval(this.listData.map(v=>parseInt(v.value)).join('+'))
      }else{
        return 1
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_=>{
      this.init();
    })
  },
  methods: {
    init(){
       this.listData=[]
       this.jz=true
      getTalentRecommendationTop(this.dateProp)
      .then(({data:{data}})=>{
        this.jz=false;
        console.log(this.listData)
		var newArr = [];	
				for (var i = 0; i <data.length; i++) {
				  var vote = {};
				  var reg = /(?<=.)./;
		          vote.name = data[i].name.replace(reg, '*');
		          vote.value = data[i].value;
		          newArr.push(vote);
				}
				console.log(newArr[1]);
			 this.listData =newArr;
      })
	 

    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
  .rank-component
    margin-top 15px
</style>